<template>
  <div class="app-container">
    <!-- 头部按钮组 -->
    <MenuButton btnType="radio" :radioActive.sync="mealType" />
    <!-- 表格 -->
    <StuTable
      max-height="700"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :stripe="true"
      border
      :list="tableData"
      :columns="columns"
      :key="mealType"
    >
      <!--单价 -->
      <template v-slot:price="{ scope }">
        <span> {{ scope.row.price }} 元</span>
      </template>

      <!-- 数量 -->
      <template v-slot:quantity="{ scope }">
        {{ scope.row.prtCount }}
      </template>

      <!-- 购买操作 -->
      <template v-slot:purchase="{ scope }">
        <div @click="handlePurchase(scope.row)" class="purchase">
          <i class="el-icon-shopping-cart-2"></i>
          <span>购买</span>
        </div>
      </template>

      <!-- 删除 -->
      <template v-slot:del="{ scope }">
        <div @click="handleDelRecord(scope.row)" class="del">
          <span class="delete">删除</span>
        </div>
      </template>
    </StuTable>

    <!-- 编辑角色名 -->
    <Renewal
      v-if="dialogs.remind"
      :visible.sync="dialogs.remind"
      :info="dialogs.row"
      @updateData="getMealList"
    />
  </div>
</template>

<script>
import { getMealList, getHistoyList, buyMeal, deleteMeal } from "@/api";
import MenuButton from "@/components/MenuButton";
export default {
  name: "PurchasePackage",
  components: {
    MenuButton
  },
  data() {
    return {
      //当前表格类型--------------------------------------------
      mealType: "",
      //表单数据--------------------------------------------
      tableData: [],
      //表单配置--------------------------------------------
      columns: [
        // 表格的表头数据及其参数名称
        { name: "套餐名称", value: "setMeal" },
        { name: "套餐单价", value: "price", slotName: "price" },
        {
          name: "数量",
          value: "prtCount",
          slotName: "quantity"
        },
        { name: "金额", value: "totalPrice" },
        { name: "操作", value: "purchase", slotName: "purchase" }
      ],
      //弹窗--------------------------------------------
      dialogs: {
        // 续约
        row: {}
      }
    };
  },
  watch: {
    mealType(newVal) {
      if (newVal == "购买记录") {
        //表单配置--------------------------------------------
        this.columns = [
          // 表格的表头数据及其参数名称
          { name: "购买日期", value: "setMeal" },
          { name: "套餐名称", value: "setMeal", slotName: "price" },
          {
            name: "描述",
            value: "prtCount",
            slotName: "quantity"
          },
          { name: "金额", value: "totalPrice" },
          { name: "操作", value: "del", slotName: "del" }
        ];
        this.getHistoyList();
      } else {
        //表单配置--------------------------------------------
        this.columns = [
          // 表格的表头数据及其参数名称
          { name: "套餐名称", value: "setMeal" },
          { name: "套餐单价", value: "price", slotName: "price" },
          {
            name: "数量",
            value: "prtCount",
            slotName: "quantity"
          },
          { name: "金额", value: "totalPrice" },
          { name: "操作", value: "purchase", slotName: "purchase" }
        ];
        this.getMealList();
      }
    }
  },

  methods: {
    //获取表格信息--------------------------------------------
    async getMealList() {
      this.tableData = [];
      let mealType = "";
      switch (this.mealType) {
        case "购买空间":
          mealType = "space_size";
          break;
        case "购买流量":
          mealType = "traffic_size";
          break;
        case "购买数量":
          mealType = "goods_size";
          break;
      }
      let res = await getMealList({ mealType }).catch(err => console.log(err));
      if (!res) return;
      this.tableData = res.items;
    },

    //购买记录时表格信息--------------------------------------------
    async getHistoyList() {
      this.tableData = [];
      const shopUuid = this.$store.getters.shopUuid;
      const params = {
        page: 0,
        pageSize: 0,
        shopUuid
      };
      let res = await getHistoyList(params).catch(err => console.log(err));
      if (!res) return;
      this.tableData = res.items;
    },

    //购买--------------------------------------------
    handlePurchase(row) {
      console.log(row);
      this.$confirm(`确定购买此套餐吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "我再想想",
        type: "success"
      })
        .then(() => {
          const shopUuid = this.$store.getters.shopUuid;
          const data = {
            ...row,
            shopUuid
          };
          delete data.optionDate;
          delete data.optionUser;
          buyMeal(data).then(res => {
            if (res.state == 100) {
              this.getMealList();
              this.$message({
                type: "success",
                message: res.msg
              });
            }
          });
        })
        .catch(e => {
          console.log(e);
          this.$message({
            type: "info",
            message: "已取消修改"
          });
        });
    },

    //删除记录--------------------------------------------
    handleDelRecord(row) {
      console.log(row);
      this.$confirm(`确定删除该记录吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "我再想想",
        type: "warning"
      })
        .then(() => {
          console.log(row.uuid);
          const data = {
            uuid: row.uuid
          };
          deleteMeal(data).then(res => {
            if (res.state == 100) {
              this.getMealList();
              this.$message({
                type: "success",
                message: res.msg
              });
            }
          });
        })
        .catch(e => {
          this.$message({
            type: "info",
            message: "已取消修改"
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/element-ui.scss";
.app-container {
  .purchase {
    margin: 0 auto;
    width: 84px;
    height: 36px;
    background: #ecfff1;
    border: 1px solid #44d26c;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    & > i {
      font-size: 16px;
      color: #44d26c;
      margin-right: 10px;
    }

    & > span {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #44d26c;
      line-height: 60px;
    }

    &:hover {
      background-color: #44d26c;
      & > i,
      span {
        color: #ecfff1;
      }
    }
  }

  .delete {
    color: $--color-danger;
    cursor: pointer;
  }
}
</style>
